import React, { Component } from 'react'
import { connect } from 'dva';
import Link from 'umi/link';

import { Form, Input, DatePicker } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';

import { FormComponentProps } from "antd/lib/form/Form";
import { dealElement } from '@/utils/util';
import moment from 'moment';

interface IProps extends FormComponentProps {
  current: number;
  form: any;
  dispatch?: ({ type }: { type: string, payload?: any }) => Promise<any>;
  initCurrent: Function;
  new: boolean;
  dict?: any;
  cond?: {
  };
}

const FormItem = Form.Item;

@connect(({ analyse_charge }) => ({
  dict: analyse_charge.dict,
  cond: analyse_charge.chargingErrorCond || {}
}))
class Search extends Component<IProps, any> {
  formRef: any;

  state = {
    show: false
  }

  search = (e) => {
    e.preventDefault()
    const { form } = this.props;
    form.validateFields((err, values) => {      
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'analyse_charge/updateChargingErrorCond',
          payload: values
        })
      }
    });
  }

  handleChangeTime = (value) => {
    const { cond = {}, dispatch } = this.props;    
    cond['lastPowerFailureTime'] = value ? moment(value).format("YYYY-MM-DD HH:mm:ss") : null;

    dispatch({
      type: 'analyse_charge/updateChargingErrorCond',
      payload: dealElement(cond)
    })
  }

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };

    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={6}>
            <FormItem
              label="站点名称"
              {...formItemLayout}
            >
              {getFieldDecorator('station')(
                <Input placeholder='站点名称' allowClear />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={6}>
            <FormItem
              label="充电桩名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name')(
                <Input placeholder='充电桩名称' allowClear />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={5} span={6}>
            <FormItem
              label="最新断电时间"
              {...formItemLayout}
            >
              {getFieldDecorator('lastPowerFailureTime')(
                <DatePicker
                  showTime
                  {...getFieldDecorator('lastPowerFailureTime')}
                  format={'YYYY-MM-DD HH:mm:ss'}
                  style={{ width: '100%' }}
                  placeholder="最新断电时间"
                  onChange={(v) => this.handleChangeTime(v)}
                />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={6} span={6}>
            <SearchRow type="flex" justify="end" >
              <SearchButton onClick={() => {
                window.history.back();
              }}>返回</SearchButton>
              <SearchButton type="primary" htmlType="submit" style={{ 'marginRight': '15px' }} onClick={this.search}>搜索</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<IProps>()(Search);
export default SearchS;
